<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参数传递</title>
</head>

<body>
    <input type="text" id='name'><br>
    <input type="text" id='age'><br>
    <button>提交</button>
    <script>
        const name = document.querySelector('#name');
        const age = document.querySelector('#age');
        const btn = document.querySelector('button');
        btn.onclick = function() {
            const x = new XMLHttpRequest();
            const params = 'uname=' + name.value + '&age=' + age.value;
            // get方法请求参数
            x.open('post', 'http://127.0.0.1:8000/first?' + params);
            // JSON.parse()将json字符串转转换为json对象
            // JSON.stringify()将json对象转换为json字符串
            x.send();
            x.onload = function() {
                // onload：不兼容IE低版本，不需要判断ajax状态码，只能被调用一次
                // onreadystatechange：兼容IE低版本，需要判断ajax状态码，可以被调用多次
                console.log(x.responseText);
            }
        }
    </script>
</body>

</html>